<template>
  <div>
    <Navbar :appTitle="appTitle" :leftArrow="false" />
    <!-- <Navbar
      :appTitle="appTitle"
      :right="rtitle"
      :rightShow="true"
      :rname="rname"
      rColor="#1890ff"
      @ClickRight="ClickRight"
    /> -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div class="test"></div>
      <div class="bigBox">
        <!-- Top--开始4个选项卡 -->
        <TopBox :topArray="topArray"></TopBox>
        <!-- Top--结束 -->

        <!-- 常用--begin -->
        <commonly-used></commonly-used>
        <!-- 常用--end -->
        <div class="botBox">
          <div
            class="itemBox"
            v-for="(item, index) in applicationList"
            :key="index"
            @click="routerChange(item)"
          >
            <div class="itemLeft">
              <img
                :src="`${apiBaseUrlDownload}jksaas-mgt/mgt${item.attachment}`"
                v-if="item.attachment"
                alt=""
                class="leftImg"
              />
              <img
                src="~@/assets/img/application_1.png"
                alt=""
                class="leftImg"
                v-else
              />
              <div class="leftTextBox">
                <div class="textTitle">{{ item.name }}</div>
                <div class="textContent">{{ item.desc }}</div>
              </div>
            </div>
            <div class="itemRight">
              <div class="rightCircle" v-if="item.flag"></div>
              <img src="~@/assets/img/goNext.png" alt="" class="goNext" />
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>

    <PDAsao @changeScan="changeScan" />
    <TabBar></TabBar>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import { produceAxios } from "@/api/manage";
import TabBar from "@/components/TabBar";
import { apiBaseUrlDownload } from "@/utils/request";
import TopBox from "./TopBox.vue";
import CommonlyUsed from "./CommonlyUsed.vue";
import { LING_YANG_ROLE_TYPE } from "@/store/mutation-types";
import PDAsao from "@/components/scanCode/PDAsao.vue";
import { wmsPickingTaskQueryById } from "@/api/mobile";
import { shelvesTaskDetailAno } from "@/api/inventoryOrder";
import store from "@/store";
const formobj = {
  alreadyExecuteNum: "",
  createOfMineNum: "",
  needToExecuteNum: "",
  noticeMeNum: "",
};
export default {
  name: "Home",
  components: { Navbar, TabBar, TopBox, CommonlyUsed, PDAsao },
  data() {
    return {
      rtitle: "发起",
      rname: "plus", //search
      formdata: Object.assign({}, formobj),
      topArray: [
        {
          title: "待我审批",
          number: "",
          applyType: "waiterDeal",
        },
        {
          title: "已审批",
          number: "",
          applyType: "alreadyDeal",
        },
        {
          title: "已发起",
          number: "",
          applyType: "alreadyLaunch",
        },
        {
          title: "我收到的",
          number: "",
          applyType: "copyToMe",
        },
      ],
      apiBaseUrlDownload,
      appTitle: "首页",
      applicationList: [],
      isLoading: false,
    };
  },
  computed: {},
  created() {
    this.getBotData(false);
    this.getMyoperationNum();
  },
  mounted() {},

  methods: {
    // 激光扫码
    async changeScan(v) {
      // 这里不能通过 v中带过来的数据处理，需要手动去获取实时数据
      if (v.EntityType == "picking") {
        let res = await wmsPickingTaskQueryById({ id: v.id });
        if (res.code == 200 && res.result) {
          if (res.result.unPickedDetailsList.length > 0) {
            this.$router.push({
              path: "/pickingTasksVerification",
              query: {
                id: v.id,
              },
            });
          } else {
            this.$toast("已核验出库，无法核验");
          }
        } else {
          this.$toast(res.message);
        }
      } else if (v.EntityType == "shelfTask") {
        try {
          // 修改前缀
          store.commit("SET_CURRENT_PREFIX", "/jksaas-produce/produce");
          let res = await shelvesTaskDetailAno({ taskId: v.id });
          if (res.code == 200 && res.result) {
            if (res.result.totalUnShelvedNum > 0) {
              this.$router.push({
                path: "/shelfTaskForm",
                query: {
                  id: v.id,
                },
              });
            } else {
              this.$toast("已上架，无法上架");
            }
          } else {
            this.$toast(res.message);
          }
        } catch (error) {
          alert(error);
        }
      } else {
        this.$toast("请扫正确的二维码");
      }
    },
    onRefresh() {
      this.getBotData(true);
      this.getMyoperationNum();
    },
    getMyoperationNum() {
      produceAxios("/proc/apply/queryApplyNum").then((res) => {
        if (res.success) {
          this.topArray[0].number = res.result.needToExecuteNum;
          this.topArray[1].number = res.result.alreadyExecuteNum;
          this.topArray[2].number = res.result.createOfMineNum;
          this.topArray[3].number = res.result.noticeMeNum;
        } else {
          this.$toast(res.message);
        }
      });
    },
    getBotData(type) {
      let antelopeFlag = this.$ls.get(LING_YANG_ROLE_TYPE);
      let params = {};
      if (antelopeFlag) {
        params.antelopeFlag = antelopeFlag;
      }
      produceAxios("/home/homePage/findRedDot", params).then((res) => {
        if (res.success) {
          this.applicationList = res.result;
          if (type) {
            this.$nextTick(() => {
              this.isLoading = false;
            });
          }
        } else {
          this.$toast(res.message);
        }
      });
    },
    routerChange(item) {
      console.log(item);
      this.$router.push({
        path: item.url,
        query: {
          navTitle: item.name,
        },
      });
    },
    ClickRight() {
      console.log("去 发起申请");
      this.$router.push("/apply");
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";

.bigBox {
  margin-bottom: 20px;
  height: calc(100vh - 200px);
  overflow: scroll;
}
div.botBox {
  box-sizing: border-box;
  padding: 0 32px;
  background: #ffffff;
  margin-top: 20px;
  div.itemBox {
    box-sizing: border-box;
    padding: 32px 0;
    border-bottom: 2px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:nth-last-child(1) {
      border-bottom: none;
    }
    div.itemLeft {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img.leftImg {
        width: 80px;
        height: 80px;
        margin-right: 0.1rem;
      }
      div.leftTextBox {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
        div.textTitle {
          font-size: 32px;
          font-weight: 500;
          color: #191f25;
        }

        div.textContent {
          font-size: 28px;
          color: #888888;
        }
      }
    }

    div.itemRight {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      div.rightCircle {
        width: 10px;
        height: 10px;
        background: #ff4d4f;
        border-radius: 50%;
        margin-right: px;
      }
    }
  }
}
</style>
